<template>
  <div class="tranfer">
    <div class="content-div">
      <div class="load-bg">
        <div class="jump"></div>
        <i></i><i></i><i></i><i></i><i></i>
      </div>
      <div v-show="isSuccess1" style="text-align:center;font-size: 18px;color: #fff;">
        <span>验证成功，</span>
        <span style="color: #00BFFF;font-size: 24px;">{{ num }}</span>
        <span>秒后跳转</span>
      </div>
      <div v-show="isSuccess2" style="text-align:center;font-size: 18px;color: #fff;">
        <span>验证失败，点击</span>
        <a href="#" @click="returnPre">返回上一页</a>
      </div>
    </div>
  </div>
</template>

<script>
import encryption from '@/libs/encryption.js';
import cookieUse from '@/libs/cookie.js';
import { loginToken, baseInfo } from '@/api/login.js';
export default {
  data() {
    return {
      num: 3,
      isSuccess1: false,
      isSuccess2: false,
      setinter: null
    };
  },
  mounted() {
    let url = window.location.href;
    let getParams = url.split('?')[1];
    let a = getParams.split('&');
    let obj = {};
    for (let i = 0; i < a.length; i++) {
      let val = a[i].split('=');
      obj[val[0]] = val[1];
    }
    // let token = url.split("?token=")[1];
    this.login(obj);
  },
  created() {},

  methods: {
    // 免登录接口
    login(obj) {
      loginToken(JSON.stringify(obj))
        .then((res) => {
          if (res.data.code === 1) {
            let getData = res.data.data;
            let userInfo = getData.user;
            this.isSuccess1 = true;
            if (userInfo.type === 'experimenter') {
              // 跳转操作员系统
              sessionStorage.setItem('exper-token', getData.token);
              sessionStorage.setItem('rm', true);
              cookieUse.setCookie('exper-token', getData.token, 168);
              this.setinter = setInterval(() => {
                this.num--;
                if (this.num < 1) {
                  clearInterval(this.setinter);
                  window.openTrain('/bexperiment/#/homer', '_self');
                }
              }, 1000);
            } else {
              // 跳转设计师系统
              cookieUse.setCookie('desig-token', getData.token, 168);
              localStorage.setItem('token', getData.token); // 为topo页面存储
              sessionStorage.setItem('desig-rm', true);
              // 单位管理员或者单位设计师
              let isRootDesigner;
              if (userInfo.role && userInfo.role === 'leader') {
                isRootDesigner = true;
              } else {
                isRootDesigner = false;
              }
              let November = {
                userId: userInfo.id,
                userName: userInfo.username,
                nickname: userInfo.nickname,
                companyName: userInfo.companyName,
                companyId: userInfo.companyId,
                initPwd: userInfo.initialPassword,
                avatar: userInfo.avatar || require('@/assets/globalIcon/defult.jpg'),
                isRootDesigner: isRootDesigner,
                distributed: getData.distributed
              };
              sessionStorage.setItem(
                'November',
                encryption.SelfUseEncrypt(JSON.stringify(November))
              );
              this.setinter = setInterval(() => {
                this.num--;
                if (this.num < 1) {
                  clearInterval(this.setinter);
                  this.$router.push({
                    path: '/main'
                  });
                }
              }, 1000);
            }
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 5,
              closable: true
            });
            this.isSuccess2 = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取用户信息
    getUserInfo() {
      this.num = 3;
      clearInterval(this.setinter);
      baseInfo()
        .then((res) => {
          if (res.data.code === 1) {
            console.log(res.data);
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 返回上一页
    returnPre() {
      window.history.go(-1); //返回上一页
    }
  }
};
</script>

<style scoped>
.tranfer {
  width: 100%;
  height: 100%;
  background: rgb(8, 23, 90);
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-box-shadow: 0 0 15px rgb(8, 23, 90);
  box-shadow: 0 0 15px rgb(8, 23, 90);
}
.load-bg {
  position: relative;
  width: 400px;
  height: 200px;
  line-height: 300px;
  text-align: center;
}
.load-bg i {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #94949c;
  margin: 0 12px;
  -webkit-animation: load 1.2s linear infinite;
}
.load-bg i:nth-child(1) {
  -webkit-animation-delay: 0.2s;
}
.load-bg i:nth-child(2) {
  -webkit-animation-delay: 0.4s;
}
.load-bg i:nth-child(3) {
  -webkit-animation-delay: 0.6s;
}
.load-bg i:nth-child(4) {
  -webkit-animation-delay: 0.8s;
}
.load-bg i:nth-child(5) {
  -webkit-animation-delay: 1s;
}
@-webkit-keyframes load {
  from {
    background: none;
    border: 2px solid #94949c;
  }
  to {
    background: -webkit-linear-gradient(top, #626464, #eee);
    border: 1px solid #626464;
  }
}
.jump {
  position: absolute;
  display: inline-block;
  top: 30%;
  width: 18px;
  height: 22px;
  border-radius: 50%;
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#626464), to(#eee));
  background: -webkit-linear-gradient(#626464, #eee);
  background: -moz-linear-gradient(#626464, #eee);
  background: -o-linear-gradient(#626464, #eee);
  background: linear-gradient(#626464, #eee);
  -webkit-animation: jump 2s ease-in-out 0.5s infinite;
}
.jump:before {
  content: '';
  position: absolute;
  width: 30px;
  height: 2px;
  color: red;
}
@-webkit-keyframes jump {
  0% {
    height: 18px;
    -webkit-transform: translate(15px, 30px);
  }
  12% {
    height: 18px;
    -webkit-transform: translate(28px, -30px);
  }
  24% {
    height: 18px;
    -webkit-transform: translate(53px, 30px);
  }
  36% {
    height: 18px;
    -webkit-transform: translate(78px, -30px);
  }
  48% {
    height: 18px;
    -webkit-transform: translate(103px, 30px);
  }
  60% {
    height: 18px;
    -webkit-transform: translate(125px, -30px);
  }
  72% {
    height: 18px;
    -webkit-transform: translate(150px, 30px);
  }
  84% {
    height: 18px;
    -webkit-transform: translate(170px, -30px);
  }
  100% {
    height: 18px;
    -webkit-transform: translate(200px, 30px);
  }
}
</style>
